<template>
  <div class="login-wrapper">
    <div class="login-box">
      <div class="login-logo">
        <div class="logo-left"></div>
        <div class="logo-middle">AI FORCE</div>
        <div class="logo-right"></div>
      </div>
      <div class="login-content">
        <div class="ph-input-wrapper input-wrapper">
          <div class="input-box">
            <input
              type="text"
              class="ph-input input"
              placeholder="请输入手机号码"
            />
          </div>
        </div>
        <div class="key-input-wrapper input-wrapper">
          <span class="visible" @click="isVisible()">
            <i :class="this.iClass"></i>
          </span>

          <div class="input-box">
            <input
              :type="this.inputType"
              class="key-input input"
              placeholder="请输入密码"
            />
          </div>
        </div>
        <div class="login-btn-wrapper">
          <div class="login-btn" @click="login()">登录</div>
        </div>
        <div class="more-select">
          <div class="jump-wrapper">
            <div class="jumpRegister jump" @click="jumpRegister()">注册</div>
            <div>|</div>
            <div class="jumpHomepage jump" @click="jumpHomepage()">
              回到首页
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="warn-wrapper">
      <div class="little-point"></div>
      <span class="warn-info">{{ this.warning }}</span>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "login",
  data() {
    return {
      visibleFlag: -1,
      iClass: "fas fa-eye-slash",
      inputType: "password",
      warning: "",
    };
  },
  mounted(){
    if(this.$route.params.message){
      this.warning=this.$route.params.message;
      this.warn()
    }
  },
  methods: {
    isVisible() {
      this.visibleFlag = -this.visibleFlag;
      if (this.visibleFlag == 1) {
        (this.iClass = "fa fa-eye"), (this.inputType = "text");
      } else {
        (this.iClass = "fas fa-eye-slash"), (this.inputType = "password");
      }
    },
    jumpRegister() {
      this.$router.push({
        name: "register",
      });
    },
    jumpHomepage() {
      this.$router.push({
        name: "homepage",
      });
    },
    login() {
      // 正则验证
      let phone = document.getElementsByClassName("ph-input")[0].value;
      let key = document.getElementsByClassName("key-input")[0].value;
      let rightPhone = /^1[34578][0-9]{9}$/;
      let rightKey = /^.{6,20}$/;
      if (!rightPhone.test(phone)) {
        this.warning = "请输入正确的11位手机号码";
        this.warn();
        return 0;
      } 
      else if (!rightKey.test(key)) {
        this.warning = "请输入6-20位有效密码";
        this.warn();
        return 0;
      } 
      else {
        axios({
          method: "POST",
          url: "/api/user/login",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
          data: {
            key,
            phone,
          },
          transformRequest: [
            function (data) {
              let fd = new FormData();
              fd.append("phone", data.phone);
              fd.append("password", key);
              return fd;
            },
          ],
        }).then((response)=>{
          if(response.data.code==105){
            this.warning=response.data.msg;
            this.warn()
          }else{
            this.$router.push({
              name:'homepage',
              params:{
                isLogin:true,
                userData:response.data.data
              }
            })
          }
        });
      }
    },
    // 弹出提示框
    warn() {
      let warnInfo = document.getElementsByClassName("warn-wrapper")[0];
      warnInfo.style.right = 230 + "px";
      let t=setTimeout(function () {
          warnInfo.style.right = -250 + "px";
          clearTimeout(t);
      }, 5000);
    },
  },
};
</script>
<style>
.login-wrapper {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(140, 48, 245);
  width: 100%;
  height: 100vh;
  color: rgb(150, 155, 171);
  position: relative;
}
.login-logo {
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 2.55rem;
}
.logo-left {
  width: 0px;
  height: 0px;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-right: 50px solid rgb(140, 48, 245);
  z-index: 1000;
}
.logo-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(140, 48, 245);
  width: 160px;
  height: 80px;
  box-shadow: rgb(0 0 0 / 30%) 10px 0px 50px 2px;
}
.logo-right {
  width: 0px;
  height: 0px;
  border-top: 40px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 50px solid rgb(140, 48, 245);
}
.login-content {
  background-color: rgb(255, 255, 255);
  width: 30rem;
  border-radius: 20px;
  padding-top: 3.9rem;
  padding-bottom: 1.2rem;
  box-shadow: rgb(0 0 0 / 30%) 2px 2px 20px 2px;
}
.input-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-around;
  position: relative;
}
.ph-input-wrapper {
  margin-top: 2rem;
}
.input-box {
  display: inline-block;
  width: 360px;
  position: relative;
  vertical-align: middle;
  line-height: normal;
}
.input {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 1.5;
  padding: 4px 7px;
  font-size: 14px;
  border: 1px solid #dcdee2;
  border-radius: 4px;
  color: #515a6e;
  background-color: #fff;
  transition: border 0.2s ease-in-out;
}
input::-webkit-input-placeholder {
  color: #515a6e;
  opacity: 0.5;
}
.input:hover {
  border-color: #a359f7;
}
.input:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(140 48 245 / 20%);
  border-color: #a359f7;
}

.visible {
  cursor: pointer;
  width: 32px;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 390px;
  right: 0;
  top: 10px;
  z-index: 1;
}
.login-btn {
  width: 67%;
  height: 2.5rem;
  background: rgb(140, 48, 245);
  border-radius: 0.2rem;
  cursor: pointer;
  margin: 0px auto 2rem;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.more-select {
  display: flex;
  justify-content: space-between;
  padding-left: 20rem;
}
.jump-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jump {
  cursor: pointer;
  margin: 0px 0.3rem;
}
.warn-wrapper {
  z-index: 1000000;
  position: fixed;
  right: -250px;
  top: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  color: #515a6e;
  border-radius: 20px;
  transition: right 0.3s ease-in-out;
}
.warn-info {
  margin: 10px;
}
.little-point {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: yellow;
  margin: 10px;
}
</style>